<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>表格组件-小懒猫</title>
	<meta name="keywords" content="关键字,关键字"/>
	<meta name="description" content="描述信息">
	<style>
		.pug-tab{
			width: 800px;
		}
		thead{
			font-weight: bold;
		}
		td{
			border: 1px solid #ccc;
			
		}
		table {
		    border-collapse: collapse;
		}
	</style>
</head>
<body>
	<div id="app">
		<table class="pug-tab">
			<thead>
				<tr>
					<td>Id</td>
					<td>用户名</td>
					<td>年龄</td>
					<td>城市</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>10010</td>
					<td>Mickey</td>
					<td>25</td>
					<td>广州</td>
				</tr>
			</tbody>
		</table>
		<hr/>
		<h1>{{title}}</h1>
		<Pug-Table :theader="headerData" :table-data="tabData">
		</Pug-Table>
	</div>
	<script src="../js/vue-min.js"></script>
	<script setup>
		const app = Vue.createApp({
			data() {
				return {
					title : "表格组件...",
					headerData: [{
					    label: "主健",
					    prop: "id"
					}, {
					    label: "用户名",
					    prop: "name"
					}, {
					    label: "年龄",
					    prop: "age"
					}, {
					    label: "城市",
					    prop: "address"
					}, {
					    label: "opts",
					    prop: "操作"
					}],
					tabData:[
						{"id":10010,"name":"KIKI","age":18,"address":"上海"},
						{"id":10020,"name":"Mickey","age":20,"address":"深圳"},
						{"id":10030,"name":"Dasic","age":18,"address":"广州"},
						{"id":10040,"name":"Min","age":23,"address":"北京"},
						{"id":10050,"name":"Davic","age":30,"address":"杭州"}
					]
				}
			}
		});
		app.component("pug-table",{
			template : `<table class="pug-tab">
							<thead>
								<tr>
									<td v-for="(name,index) in theader" :key="index">{{name.prop}}</td>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(tab,index) in tableData" :key="index">
									<td>{{tab.id}}</td>
									<td>{{tab.name}}</td>
									<td>{{tab.age}}</td>
									<td>{{tab.address}}</td>
									<td>
										<button @click="hanlderDel(index)">删除</button>
										<button @click="hanlderEdit(index)">编辑</button>
									</td>
								</tr>
							</tbody>
						</table>`,
			props : {
				theader: {
				    type: Array,
				    default: [],
				},
				tableData: {
				    type: Array,
				    default: [],
				},
			},
			methods : {
				hanlderDel(index){
					const item = this.tableData[index];
					console.log("del",item);
					this.tableData.splice(index,1);
				},
				hanlderEdit(index){
					const item = this.tableData[index];
					console.log("edit",item);
					
				}
			}
		})
		app.mount("#app");
	</script>
</body>
</html>